<script setup lang="ts">
import geojsonvt from 'geojson-vt'
import mapboxgl from 'mapbox-gl'
import { onMounted, ref, computed, watch } from 'vue'
import jjjson from './assets//ExportOutputPoint.json'

const { data: dataA } = jjjson

const tolerance = ref(200)
const tileMaxZoom = ref(15)
const buffer = ref(0)
const clusterRadius = ref(5)
// const loaded = computed(() => (map !== null && map.isStyleLoaded) ? map.isStyleLoaded() : false)

// watch(loaded, val => {
//   if (val) console.log(val)
// })

const featureCollection = {
  "type": "FeatureCollection",
  "features": <any>[]
}

// const dataArray: Array<number[]> = []
dataA.map(({ X, Y }) => {
  featureCollection.features.push(<any>{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      coordinates: [X, Y]
    }
  })
  // dataArray.push([X, Y]))
})


// console.log(featureCollection);
// const featureCollectionJSON = JSON.parse(JSON.stringify(featureCollection).replace(/\s/g, ""))
// console.log(featureCollectionJSON)

// const tileIndex = geojsonvt(featureCollection)
// console.log(tileIndex)

let map: any = null

const initMapFn = (): void => {
  mapboxgl.accessToken =
    'pk.eyJ1Ijoic2FnaXQtemgiLCJhIjoiY2t0bnl5dDFnMDZ0aTJwcDNsa3N4emF1biJ9.jFO8rJJN-kvaz9vuQ0odKQ'
  const mapOptions = {
    // container: 'map',
    // center: [110.229125976562, 20.3477172851563],
    // // zoom: 7,
    // // style: 'mapbox://styles/mapbox/streets-v11',
    // style: {
    //   "version": 8,
    //   "name": "Mapbox Streets",
    //   // "sprite": "mapbox://sprites/mapbox/streets-v8",
    //   // "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    //   "sources": {},
    //   "layers": []
    // },
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    zoom: 13,
    center: [-122.447303, 37.753574]
  }
  map = new mapboxgl.Map(mapOptions)

  map.on('load', () => {
    // if (map.loaded()) console.log('底图load')
    // if (map.isStyleLoaded()) console.log('样式load')
    // if (map.isSourceLoaded()) console.log('source load')

    // map.on('moveend', (e: any) => {
    //   const { x, y } = e.originalEvent
    //   const z = map.getZoom()
    //   console.log(z, x, y);
    // })
    // const { layers } = map.getStyle()
    // // console.log(map.getStyle().layers)
    // layers.map(({ id }) => map.setLayoutProperty(id, 'visibility', 'none'))

    // console.log(map.areTilesLoaded())
    handleChange()
    // console.log(map.getLayer('maine'))

    // map.addLayer({
    //   'id': 'outline',
    //   'type': 'line',
    //   'source': 'maine',
    //   'layout': {},
    //   'paint': {
    //     'line-color': '#000',
    //     'line-width': 3
    //   }
    // });
    // console.timeEnd('渲染测试')
  });

}
onMounted(() => initMapFn())

const handleChange = () => {

  if (map.getLayer('maine')) map.removeLayer('maine')
  if (map.getSource('maine')) map.removeSource('maine')

  console.time('测试')
  map.addSource('maine', {
    type: 'geojson',
    data: featureCollection,
    // 'lineMetrics': true,
    'tolerance': parseFloat(<any>tolerance.value),
    'maxzoom': parseFloat(<any>tileMaxZoom.value),
    'buffer': parseFloat(<any>buffer.value),
    'cluster': true,
    'clusterMaxZoom': 14, // Max zoom to cluster points on
    'clusterRadius': parseFloat(<any>clusterRadius.value) // Radius of each cluster when clustering points (defaults to 50)
  })
  // map.addLayer({
  //   'id': 'maine',
  //   'type': 'circle',
  //   'source': 'maine', // reference the data source
  //   'layout': {},
  //   'paint': {
  //     // 'fill-color': '#0080ff', // blue color fill
  //     // 'fill-opacity': 0.5
  //     "circle-radius": 2,
  //     // "circle-color": "#0080ff",
  //     'circle-color': [
  //       'step',
  //       ['get', 'point_count'],
  //       '#0080ff',
  //       50,
  //       '#51bbd6',
  //       100,
  //       '#f1f075',
  //       750,
  //       '#f28cb1'
  //     ],
  //     // 'circle-radius': [
  //     //   'step',
  //     //   ['get', 'point_count'],
  //     //   2,
  //     //   50,
  //     //   5,
  //     //   100,
  //     //   10,
  //     //   750,
  //     //   30
  //     // ]
  //     // "circle-stroke-width": 1,
  //     // "circle-stroke-color": 'red'
  //   },
  //   // 'minzoom': 3.5,
  //   'icon-allow-overlap': true
  // });

  map.addSource('mapbox-terrain', {
    type: 'vector',
    url: 'mapbox://mapbox.mapbox-terrain-v2'
  });
  map.addLayer({
    'id': 'terrain-data',
    'type': 'line',
    'source': 'mapbox-terrain',
    'source-layer': 'aabc',//'contour',
    'layout': {
      'line-join': 'round',
      'line-cap': 'round'
    },
    'paint': {
      'line-color': '#ff69b4',
      'line-width': 1
    }
  });

  console.timeEnd('测试')

}

</script>

<template>
  <div id="map"></div>
  <br />tolerance：
  <input type="number" v-model="tolerance" />

  <br />maxzoom：
  <input type="number" v-model="tileMaxZoom" />

  <br />buffer：
  <input type="number" v-model="buffer" />

  <br />clusterRadius：
  <input type="number" v-model="clusterRadius" />

  <br />
  <button @click="handleChange()">更改</button>
</template>

<style>
#map {
  width: 1000px;
  height: 800px;
  border: 1px solid tomato;
}
</style>